﻿@{
    ViewBag.Title = "SitePreview";
    Layout = "";
}
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6 lte9 lte8 lte7 no-js"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7 lte9 lte8 lte7 no-js"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8 lte9 lte8 no-js"> <![endif]-->
<!--[if IE 9 ]><html class="ie ie9 lte9 no-js"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html class="notie no-js">
<!--<![endif]-->
<head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
    @Html.Headers()
    @Html.ScriptRefs("jquery.min.js",
    "jquery-ui.min.js",
    "jquery.tmpl.min.js",
    "jquery.farbtastic.mini.js",
    "dna/runtime.min.js",
    "dna.djme/djme2.min.js")
</head>
<body style="border: none;">
    <div id="dna-page-toolbox">
        @Html.Partial("SiteTools")
    </div>
    <div id="dna-page" style="clear: right;">
        @Html.Dna().PageHeader()
        <table id="dna-page-menu" style="width: 100%; border-collapse: collapse;">
            <tr>
                <td style="padding: 0px;">
                    <div class="d-menu-left">
                    </div>
                    @{
                        Ajax.Dna().Menu("SiteMenu")
                               .Options(opts =>
                               {
                                   opts.TopMenuCssClass = "site-menu-topmenu";
                                   opts.TopItemCssClass = "site-menu-topitem";
                                   opts.TopItemHoverCssClass = "site-menu-topitem-hover";
                                   opts.TopItemSelectedCssClass = "site-menu-topitem-selected";
                                   opts.ShowSkateBoard = true;
                               })
                               .DropIcons(icons =>
                               {
                                   icons.TopIconCssClass = "ui-icon ui-icon-triangle-1-s";
                                   icons.IconCssClass = "ui-icon ui-icon-triangle-1-e";
                               })
                               .Items(items =>
                               {
                                   items.Add("top", "#");
                                   items.Add("products", "#").Items(subItems =>
                                   {
                                       subItems.Add("product1", "#");
                                       subItems.Add("product2", "#").Items(subProds =>
                                       {
                                           subProds.Add("product3", "#");
                                           subProds.Add("product4", "#");
                                       });
                                   });
                                   items.Add("hover", "#").AddClass("d-state-disabled site-menu-topitem-hover");
                                   items.Add("selected", "#").AddClass("site-menu-topitem-selected d-item");
                               })
                            .Render();
                    }
                    <div class="d-menu-right">
                    </div>
                </td>
            </tr>
        </table>
        @{ Ajax.Dna().WidgetZone("Top banner", "topzone").Render();}
        <div id="dna-page-content">
            <div id="dna-page-sitemap">
            </div>
            <table style="width: 100%;">
                <colgroup>
                    <col style="vertical-align: top;" />
                    <col style="vertical-align: top;" width="250" />
                </colgroup>
                <tr>
                    <td valign="top">
                        <div class="d-widget-zone">
                            @{
                                Ajax.Dna().Toolbar()
                                    .Buttons(btns =>
                                    {
                                        btns.AddLabel("Label");
                                        btns.AddButton("Button");
                                        btns.AddImageButton(Url.Content("~/content/images/add_page.png"), "");
                                        btns.AddSpliter();
                                        btns.AddCombo().Bind(new string[] { "Item1", "Item2", "Item3", "Item4", "Item5", "Item6" }).Width(80);
                                        btns.AddDropdown("Dropdown").MenuItems(items => { items.Add("item1", "#"); items.Add("item2", "#"); });
                                    }).ShowDragHandler(true)
                                    .Render();

                                Ajax.Dna().Tabs()
                                    .Options(opts=>{
                                        opts.Collapsible = true;
                                    })
                                    .Views(views =>
                                {
                                    views.Add("Textbox sample").Template(@<text>
                                <div>
                                    <table>
                                        <tr>
                                            <th>
                                                Normal
                                            </th>
                                            <th>
                                                Hover
                                            </th>
                                            <th>
                                                Active
                                            </th>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div class="d-textbox" style="width: 150px;">
                                                    <input type="text" style="width: 130px;" value="Normal text box"><span class="d-textbox-helper"
                                                        title="Clear the input text."></span>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="d-textbox d-textbox-hover" style="width: 150px;">
                                                    <input type="text" style="width: 130px;" value="Hover text box"><span class="d-textbox-helper"
                                                        title="Clear the input text."></span>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="d-textbox d-textbox-active" style="width: 150px;">
                                                    <input type="text" style="width: 130px;" value="Active text box"><span class="d-textbox-helper"
                                                        title="Clear the input text."></span>
                                                </div>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                </text>);

                                    views.Add("Combo sample").Template(@<text>
                                <table style="height: 200px">
                                    <tr>
                                        <th style="height: 25px;">
                                            Normal
                                        </th>
                                        <th>
                                            Hover
                                        </th>
                                        <th>
                                            Active
                                        </th>
                                    </tr>
                                    <tr>
                                        <td style="vertical-align: top;">
                                            <div class="d-combo">
                                                <input class="d-combo-input" style="width: 123px;" value="Normal text"><span class="d-combo-button"></span></div>
                                        </td>
                                        <td style="vertical-align: top;">
                                            <div class="d-combo d-combo-hover">
                                                <input class="d-combo-input" style="width: 123px;" value="Hover text"><span class="d-combo-button"></span></div>
                                        </td>
                                        <td style="vertical-align: top;">
                                            <div class="d-combo d-combo-open">
                                                <input class="d-combo-input" style="width: 123px;"  value="Active text"><input style="width: 123px; display: none;">
                                                <div class="d-combo-panel" style="min-width: 123px; position: absolute; left: 0px;
                                                    top: 27px; display: block;">
                                                    <ul style="display: block;" unselectable="on" id="ComboBox_11_menu" class="d-combo-item-container">
                                                        <li class="d-combo-item">
                                                            <span style="padding: 2px; cursor: default; display: inline-block;" title="">Item Normal </span></li>
                                                        <li class="d-combo-item d-combo-item-hover">
                                                              <span style="padding: 2px; cursor: default; display: inline-block;" title="">Item hover</span></li>
                                                        <li class="d-combo-item d-combo-item-selected">
                                                               <span style="padding: 2px; cursor: default; display: inline-block;" title="">Item selected</span></li>
                                                     </ul>
                                                </div>
                                                <span class="d-combo-button"></span>
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                                </text>);
                                }).Render();
                            }
                            <br />
                            @Ajax.Dna().CollapsablePanel().ImageUrl(Url.Content("~/content/images/chart_pie.png")).Title("CollapsablePanel").Body(@<text>
                            @(Ajax.Dna().Menu()
                            .Options(opts =>
                            {
                                opts.ShowSkateBoard = true;
                            })
                            .ChangeType(MenuTypes.Horizontal)
                            .Items(items =>
                                              {
                                                  items.Add("Item1", "javascript:void(0);", Url.Content("~/content/images/comment.png")).Items(subItems =>
                                                  {
                                                      subItems.Add("SubItem1", "javascript:void(0);");
                                                      subItems.Add("SubItem2", "javascript:void(0);").Items(subLv => { subLv.Add("SubItem5", "javascript:void(0);"); });
                                                      subItems.Add("SubItem3", "javascript:void(0);");
                                                  });
                                                  items.Add("Item2", "javascript:void(0);");
                                                  items.Add("Item3", "javascript:void(0);");
                                                  items.Add("hover", "javascript:void(0);");
                                              })
                                              .GetHtml())
                            <div style="padding: 5px;">
                                Sitemap:</div>
                            @(Ajax.Dna().SiteMap().Items(items =>
                        {
                            items.Add("Node1", "javascript:void(0);", Url.Content("~/content/images/comment.png")).Items(subItems =>
                            {
                                subItems.Add("SubNode1", "javascript:void(0);");
                                subItems.Add("SubNode2", "javascript:void(0);");
                                subItems.Add("SubNode3", "javascript:void(0);");
                            });
                            items.Add("Node2", "javascript:void(0);", Url.Content("~/content/images/comment.png")).Items(subItems =>
                            {
                                subItems.Add("SubNode4", "javascript:void(0);");
                                subItems.Add("SubNode5", "javascript:void(0);");
                                subItems.Add("SubNode6", "javascript:void(0);");
                                subItems.Add("SubNode7", "javascript:void(0);");
                            });
                            items.Add("Node3", "javascript:void(0);", Url.Content("~/content/images/comment.png")).Items(subItems =>
                            {
                                subItems.Add("SubNode8", "javascript:void(0);");
                                subItems.Add("SubNode9", "javascript:void(0);");
                            });
                            items.Add("Node4", "javascript:void(0);", Url.Content("~/content/images/comment.png")).Items(subItems =>
                            {
                                subItems.Add("SubNode10", "javascript:void(0);");
                                subItems.Add("SubNode11", "javascript:void(0);");
                                subItems.Add("SubNode12", "javascript:void(0);");
                                subItems.Add("SubNode13", "javascript:void(0);");
                            });

                        }).GetHtml())
                            </text>).GetHtml()
                            <div style="padding: 5px 0px;">
                                Richtext box</div>
                            @{Ajax.Dna().RichTextBox("sampleRTE").Render();}
                            <div style="padding: 5px 0px;">
                                Grid</div>
                            @{
                                var sampleData = new List<DNA.Mvc.Controllers.Collation>();
                                sampleData.Add(new DNA.Mvc.Controllers.Collation()
                                {
                                    Key = "Normal",
                                    Label = "Data item1",
                                    Value = "Data Value"
                                });
                                sampleData.Add(new DNA.Mvc.Controllers.Collation()
                                {
                                    Key = "Item2",
                                    Label = "Data item2",
                                    Value = "Data Value"
                                }); sampleData.Add(new DNA.Mvc.Controllers.Collation()
                                {
                                    Key = "Hover row",
                                    Label = "Data item3",
                                    Value = "Data Value"
                                }); sampleData.Add(new DNA.Mvc.Controllers.Collation()
                                {
                                    Key = "Alt row",
                                    Label = "Data item4",
                                    Value = "Data Value"
                                }); sampleData.Add(new DNA.Mvc.Controllers.Collation()
                                {
                                    Key = "Selected Row",
                                    Label = "Data item6",
                                    Value = "Data Value"
                                });

                                Ajax.Dna().Grid(sampleData)
                                    .Header(@<text> Grid header
                                </text>)
                                    .AutoGenerateColumns()
                                    .Pagable().Render();
                            }
                        </div>
                    </td>
                    <td valign="top">
                        <div class="d-widget-zone">
                            <div class="d-widget">
                                <h2 class="d-widget-header">
                                    <img alt="sample-img" src="@Url.Content("~/content/images/rss_32.jpg")" class="d-widget-icon" />
                                    <span class="d-widget-title-text">Header</span></h2>
                                <div class="d-widget-body">
@*                                    <div>
                                        Textbox</div>
                                    <div>@Ajax.Dna().TextBox("sampleTextbox").GetHtml()</div>
                                    <div>
                                        Combo</div>
                                    <div>@Ajax.Dna().ComboBox().Bind(new string[] { "Item1", "Item2", "Item3", "Item4", "Item5", "Item6" }).GetHtml()</div>*@
                                    <div>
                                        Datepicker</div>
                                    <div>@Ajax.Dna().DatePicker("sampleDatePicker").GetHtml()</div>
                                    <div>
                                        Listbox</div>
                                    <div>
                                        <div id="sampleListbox" class="d-listbox">
                                            <ul class="d-list-items-holder">
                                                <li class="d-list-item"><span style="padding: 2px; cursor: default; display: inline-block;"
                                                    title="Normal list item">Normal item</span> </li>
                                                <li class="d-list-item d-list-item-hover"><span style="padding: 2px; cursor: default;
                                                    display: inline-block;" title="Hover list item">Hover item</span> </li>
                                                <li class="d-list-item d-list-item-disabled"><span style="padding: 2px; cursor: default;
                                                    display: inline-block;" title="Disabled item">Disabled item</span></li>
                                                <li class="d-list-item d-list-item-selected"><span style="padding: 2px; cursor: default;
                                                    display: inline-block;" title="Selected item">Selected item</span></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div>
                                        Tree
                                    </div>
                                    <div>
                                        <ul class="d-tree">
                                            <li class="d-treenode-expanded d-treenode d-treenode-parent">
                                                <div class="d-treenode-button">
                                                </div>
                                                <div class="d-treenode-content">
                                                    <a class="d-treenode-link" target="_self" href="javascript:void(0);"><span class="d-treenode-text"
                                                        title="">Tree root</span></a></div>
                                                <ul class="d-treenodes-holder">
                                                    <li class="d-treenode">
                                                        <div class="d-treenode-button">
                                                        </div>
                                                        <div class="d-treenode-content">
                                                            <a class="d-treenode-link" target="_self" href="javascript:void(0);"><span class="d-treenode-text"
                                                                title="">Node - normal</span></a></div>
                                                    </li>
                                                    <li class="d-treenode d-treenode-hover">
                                                        <div class="d-treenode-button">
                                                        </div>
                                                        <div class="d-treenode-content">
                                                            <a class="d-treenode-link" target="_self" href="javascript:void(0);"><span class="d-treenode-text"
                                                                title="">Node - hover</span></a></div>
                                                    </li>
                                                    <li class="d-treenode d-treenode-selected">
                                                        <div class="d-treenode-button">
                                                        </div>
                                                        <div class="d-treenode-content">
                                                            <a class="d-treenode-link" target="_self" href="javascript:void(0);"><span class="d-treenode-text"
                                                                title="">Node - selected</span></a></div>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                    <div>
                                        TextArea</div>
                                    <div>@Ajax.Dna().TextArea().GetHtml()</div>
                                    
                                    <table>
                                    <tr><td>Normal</td><td>Hover</td></tr>
                                    <tr><td><div class="d-button" tabindex="1">Noraml button</div></td>
                                    <td><div class="d-button d-button-hover" tabindex="1">Hover button</div></td>
                                    </tr>
                                    </table>
                                    
                                 @*   <div>@Ajax.Dna().Button().Text("Sample button").GetHtml()</div>*@
                                </div>
                            </div>
                        </div>
                        <table style="width: 100%; margin-top: 5px;">
                            <tr>
                                <td valign="top">
                                    @{Ajax.Dna().Menu()
                                          .ChangeType(MenuTypes.Vertical)
                                              .Items(items =>
                                              {
                                                  items.Add("Item1", "javascript:void(0);").Items(subItems =>
                                                  {
                                                      subItems.Add("SubItem1", "javascript:void(0);");
                                                      subItems.Add("SubItem2", "javascript:void(0);");
                                                      subItems.Add("SubItem3", "javascript:void(0);");
                                                  });
                                                  items.Add("Item2", "javascript:void(0);");
                                                  items.Add("Item3", "javascript:void(0);");
                                                  items.Add("Item4", "javascript:void(0);");
                                                  items.Add("Item5", "javascript:void(0);");
                                              })
                                              .Render();}
                                </td>
                            </tr>
                            <tr>
                                <td valign="top">
                                    @*                                    @{Ajax.Dna().TreeView()
                                              .Items(items =>
                                              {
                                                  items.Add("Node1", "javascript:void(0);").Items(subItems =>
                                                  {
                                                      subItems.Add("Node2", "javascript:void(0);");
                                                      subItems.Add("Node3", "javascript:void(0);");
                                                      subItems.Add("Node4", "javascript:void(0);");
                                                  });
                                              })
                                              .Render();}*@
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    @{
                                        Ajax.Dna().Accordion().Sections(views =>
                                        {
                                            views.Add("section1").Template(@<text><div>
                                                Sample secion content</div></text>); views.Add("section2");
                                        }).Render();
                                    }
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div id="dna-page-footer" style="text-align: center;">
        @Html.Copyright(new { style = "margin-top:20px;" })
    </div>
    @Html.StartupScripts()
    @*<script type="text/javascript">
        $(function () {
            var allElements = $("*", "body");
            allElements.each(function (key, value) {
                var _cls = $(value).attr("class");
                var _id = $(value).attr("id");
                if (_cls) {
                    $(value).click(function (e) {
                        e.stopPropagation();
                        alert($(this).attr("class"));
                    });
                } else {
                    if (_id) {
                      $(value).click(function (e) {
                          e.stopPropagation();
                          alert($(this).attr("id"));
                      });
                  }
                }
            });
        });
    </script>*@
</body>
</html>
